<template>
  <div class="my">
    <div class="information_box">
      <div class="banner clearfix">
        <div class="more" @click="more_click">
          <img src="../../static/images/more.png" alt="" />
        </div>
        <div class="settings" @click="setting_click">
          <img src="../../static/images/setting.png" alt="" />
        </div>
      </div>
      <div class="information_container">
        <div class="portrait">
          <img src="../../static/images/portrait.png" alt="" />
        </div>
        <div class="information_rightcontainer">
          <div class="username">
            {{ userInformation.username }}
          </div>
          <div class="sex_and_age">
            <img
              v-if="userInformation.usersex == '女'"
              src="../../static/images/girl.png"
              alt=""
            />
            <img
              v-if="userInformation.usersex == '男'"
              src="../../static/images/man.png"
              alt=""
            />
            {{ userInformation.userage }}岁
          </div>
          <div class="userid">菲比账号：{{ userInformation.userid }}</div>
        </div>
      </div>
      <div class="sign" v-if="userInformation.usersign == ''">
        <input
          type="text"
          placeholder="编写我的个性签名"
          @focus="changeValue"
        />
      </div>
      <div class="sign" v-else>
        <input
          type="text"
          v-bind:value="userInformation.usersign"
          v-on:input="changeValue"
        />
      </div>
      <div class="fans_and_focus">
        <div class="fans">
          <span>{{ userInformation.userfans }}</span>
          <span>粉丝</span>
        </div>
        <div class="focus">
          <span>{{ userInformation.userfocus }}</span>
          <span>关注</span>
        </div>
        <div class="praise">
          <span>{{ userInformation.userpraise }}</span>
          <span>获赞</span>
        </div>
      </div>
    </div>
    <div class="menu_container">
      <ul>
        <li class="column">
          <img src="../../static/images/album_icon.png" alt="" />

          <van-cell title="相册空间" is-link to="index" />
        </li>
        <li class="column">
          <img src="../../static/images/message_icon.png" alt="" />

          <van-cell title="消息管理" is-link to="index" />
        </li>
        <li class="column">
          <img src="../../static/images/likeicon.png" alt="" />

          <van-cell title="我赞过的" is-link to="index" />
        </li>
        <li class="column">
          <img src="../../static/images/account_icon.png" alt="" />

          <van-cell title="账号管理" is-link to="index" />
        </li>
        <li class="column">
          <img src="../../static/images/draft_icon.png" alt="" />

          <van-cell title="我的草稿" is-link to="index" />
        </li>
        <li class="column">
          <img src="../../static/images/community_icon.png" alt="" />

          <van-cell title="社区公约" is-link to="index" />
        </li>
        <li class="column">
          <img src="../../static/images/help_icon.png" alt="" />

          <van-cell title="反馈与帮助" is-link to="index" />
        </li>
        <li class="column">
          <img src="../../static/images/coupons_icon.png" alt="" />

          <van-cell title="优惠券" is-link to="index" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 头像
      // portrait: "../../static/images/portrait.png",
      // 用户信息
      userInformation: {
        // 用户名
        username: "可可豆家长",
        // 用户年龄
        userage: 18,
        // 用户性别
        usersex: "男",
        // 用户菲比账户
        userid: "65642102fb",
        // 用户签名
        usersign: "",
        // 用户粉丝数
        userfans: 0,
        // 用户关注
        userfocus: 0,
        // 用户获赞
        userpraise: 0,
      },
    };
  },
  methods: {
    more_click() {},
    setting_click() {},
    changeValue(e) {
      // 用户输入值赋值给用户签名值
      this.userInformation.usersign = e.target.value;
    },
  },
};
</script>

<style lang="less">
.my {
  width: 750rpx;
  height: 100%;
  margin: 0 auto;

  .information_box {
    width: 100%;
    height: 31.9%;
    background-color: rgb(244, 201, 151);

    .clearfix::after {
      content: "";
      display: block;
      clear: both;
    }

    .banner {
      margin: 0 auto;
      padding: 3.7% 5% 0 5%;
      box-sizing: border-box;
      height: 8.4%;
      img {
        // display: block;
        width: 100%;
        vertical-align: middle;
      }
      .more {
        width: 5.1%;
        float: left;
      }
      .settings {
        width: 6.1%;
        float: right;
      }
    }
    .information_container {
      width: 91%;
      height: 44.7%;
      margin: 6.8% auto 4.4%;

      .portrait {
        width: 16.2%;
        height: 67.8%;
        display: inline-block;
        margin-right: 4.7%;

        img {
          width: 100%;
        }
      }
      .information_rightcontainer {
        display: inline-block;
        width: 71.2%;
        height: 34.6%;
        color: rgb(255, 255, 255);

        .username,
        .sex_and_age {
          display: inline-block;
        }

        .username,
        .sex_and_age {
          margin-top: 5.5%;
          margin-bottom: 3.1%;
        }

        .username {
          margin-right: 5.8%;
          font-weight: 600;
          font-size: 1.3em;
        }

        .sex_and_age,
        .userid {
          font-size: 0.5em;
        }

        .sex_and_age {
          width: 16.3%;
          height: 25.1%;
          text-align: center;
          background-color: rgb(255, 255, 255);
          border-radius: 21.5%;
          color: rgb(244, 201, 151);

          img {
            width: 20.6%;
          }
        }
      }
    }

    .sign {
      margin-left: 8.1%;
    }

    .fans_and_focus {
      padding: 8.7% 15.8% 5.8%;
    }

    .fans_and_focus div {
      text-align: center;
      display: inline-block;
      color: rgb(255, 255, 255);
      span:nth-child(2) {
        display: block;
      }
    }

    .fans_and_focus .fans,
    .fans_and_focus .focus {
      margin-right: 23.8%;
    }
  }

  .menu_container {
    height: 100%;
    padding: 9.9% 7.8%;
    box-sizing: border-box;

    li {
      margin-bottom: 12.9%;
    }

    img {
      width: 7.6%;
      display: inline-block;
    }

    .van-cell {
      width: 88.2%;
      display: inline-block;
      padding: 0 0 0 4.2%;

      .van-cell__title {
        display: inline-block;
      }

      .van-cell__right-icon {
        float: right;
      }
    }
  }
}
</style>